<template>
  <div>
    <el-form class="editInfo" ref="editInfo" :inline="false" :model="editInfo.data" :rules="editInfo.rules"
             size="small"
             label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="银行卡" prop="bankNo">
            <el-input v-model="editInfo.data.bankNo" placeholder="请输入银行卡号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户行" prop="openingBank">
            <el-input v-model="editInfo.data.openingBank" placeholder="请输入开户行"></el-input>
            <!--<el-select v-model="editInfo.data.openingBank" placeholder="请选择开户行">
              <el-option label="请选择开户行" value=""></el-option>
              <el-option v-for="(item, index) in bankAllListData" :key="`${item.postName}${index}`"
                         :label="item.dictLabel"
                         :value="item.dictValue"></el-option>
            </el-select>-->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="基础工资(元)" prop="salaryBase">
            <el-input v-model="editInfo.data.salaryBase" placeholder="请输入基础工资"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="绩效工资(元)" prop="salaryAssessment">
            <el-input v-model="editInfo.data.salaryAssessment" placeholder="请输入绩效工资"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位工资(元)" prop="salaryPost">
            <el-input v-model="editInfo.data.salaryPost" placeholder="请输入岗位工资"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="津贴(元)" prop="salaryAllowance">
            <el-input v-model="editInfo.data.salaryAllowance" placeholder="请输入津贴"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  // import { debounce } from 'lodash'
  import { validBankNo } from '@/utils/validate'
  import commonMixins from '@/mixins/common'

  export default {
    name: 'RecordEditSalary',
    mixins: [commonMixins],
    components: {},
    data() {
      let isCurrency = /^(([1-9]\d*)|0)(\.\d{1,2})?$/

      return {
        dialog: {
          visible: false // 是否显示
        },
        formParams: { // 编辑需要的参数
          bankNo: '', // 银行卡号
          openingBank: '', // 开户行
          salaryBase: '', // 基础工资
          salaryAssessment: '', // 绩效工资
          salaryPost: '', // 岗位工资
          salaryAllowance: '' // 津贴
        },
        editInfo: { // 编辑表单
          id: undefined,
          data: {
            ...this.formParams
          },
          rules: {
            bankNo: [
              {
                required: true, message: '银行卡号为20位以内数字(不允许空格)', trigger: 'blur', validator: (rule, value, callback) => {
                  if (!validBankNo(value)) {
                    callback(new Error('银行卡号为20位以内数字(不允许空格)'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            openingBank: [
              { required: true, message: '请输入开户行', trigger: 'blur' }
            ],
            salaryBase: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入基础工资'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            salaryAssessment: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入绩效工资'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            salaryPost: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入岗位工资'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ],
            salaryAllowance: [
              {
                required: true, trigger: 'blur', validator: (rule, value, callback) => {
                  if (`${value}` === '') {
                    callback(new Error('请输入津贴工资'))
                  } else if (!isCurrency.test(`${value}`)) {
                    callback(new Error('请输入有效的金额'))
                  } else {
                    callback()
                  }
                }
              }
            ]
          },
          disabled: false // 处理编辑，某些项禁止编辑
        },
        detailInfo: null
      }
    },
    props: {
      visible: {
        type: [Boolean],
        required: true,
        default: false
      },
      detailData: {
        type: Object,
        default() {
          return null
        }
      },
      bankAllListData: { // 开户行下拉列表
        type: Array,
        required: true,
        default() {
          return []
        }
      }
    },
    computed: {},
    methods: {
      async resetEditData(data = null) { // 重置编辑表单
        this.editInfo.id = undefined
        this.editInfo.disabled = false
        this.editInfo.data = JSON.parse(JSON.stringify(this.formParams))
        if (data) { // 编辑
          // this.editInfo.id = data.uuid
          this.editInfo.id = data.id
          Object.keys(this.formParams).forEach((item) => {
            this.editInfo.data[item] = data[item]
          })
          this.editInfo.disabled = true
        }
      },
      async initData(data = null) { // 初始化数据
        await this.resetEditData(data)
        this.$nextTick(() => {
          this.$refs['editInfo'].clearValidate()
        })
      }
    },
    watch: {
      visible: {
        handler: function(newVal, oldVal) {
          if (newVal !== this.dialog.visible) {
            this.dialog.visible = newVal
            if (newVal) {
              this.initData(this.detailData)
            }
          }
        },
        immediate: true
      },
      detailData: {
        handler: function(newVal, oldVal) {
          this.initData(newVal)
        },
        deep: true,
        immediate: true
      },
      'editInfo.data': {
        handler: function(newVal, oldVal) {
          // console.log(newVal)
          this.$emit('on-input', newVal)
        },
        deep: true,
        immediate: true
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .edit-box {
    & /deep/ .el-dialog {
      min-width: 900px;
      max-width: 1200px;
    }

    & /deep/ .el-dialog__body {
      padding: 10px 20px 30px;
    }

    & /deep/ .el-tabs {
      .el-tabs__content {
        overflow: visible;
      }
    }
  }

  .editInfo {
    margin-right: 0;

    .el-cascader,
    .el-select {
      width: 100%;
    }
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 70px;
    height: 70px;
  }

  .el-upload--picture-card {
    width: 70px;
    height: 70px;
    line-height: 68px;
    display: none;
  }

  .el-upload-list--picture-card .el-upload-list__item-actions span + span {
    margin-left: 8px;
  }

</style>
